Consider additional visual design elements and principles 思考更多視覺設計元素與原則

在你掌握了強調（emphasis）、層級（hierarchy）和比例（proportion）這些基礎視覺設計原則後，接下來要學習的是更進階的視覺元素，它們可以讓產品更好看、更好用。下面介紹五個重要的視覺設計元素，它們能讓設計更出色，也能提升使用者的使用感受：

1. 明度（Value）

指顏色的明暗程度。越接近白色，明度越高；越接近黑色，明度越低。

設計中的作用：

• 幫助形成對比（例如白色文字在深色背景上更易識別）

• 提高可讀性和可見性

實踐建議：使用明度對比來強化視覺焦點，例如 CTA 按鈕使用高明度色，在深色背景中脫穎而出。

2. 飽和度（Saturation）

顏色的純度或強度。高飽和度顏色顯得鮮豔；低飽和度顏色更柔和或接近灰色。

設計中的作用：

• 強調重要元素（如按鈕、警告資訊）

• 建立情緒基調（高飽和=活力；低飽和=專業/冷靜）

實踐建議：使用高飽和度顏色吸引注意力（如紅色警示按鈕），而用低飽和色做背景和輔助資訊，避免視覺疲勞。

3. 方向（Orientation）

定義：設計的版式方向，決定了佈局邏輯。裝置型別通常決定方向（橫屏 vs 豎屏 vs 方形錶盤）。

設計中的作用：

• 保證適配性（適用於不同裝置）

• 最佳化內容排列和互動方式

實踐建議：針對響應式設計，確保橫豎屏佈局都有一致且良好的使用者體驗。尤其在 Figma 中製作元件時注意方向適配。

內在吸引力（Intrinsic Interest）

元素對使用者的吸引程度。通常取決於顏色、比例、排版和影象內容。

設計中的作用：

• 幫助視覺引導，確定使用者第一眼看到什麼

• 讓頁面更具故事性和表現力

實踐建議：使用更大、更大膽的字型或影象來突出重要資訊；使用動效或插圖吸引使用者注意。

視覺重量感（Perceived Physical Weight）

定義：視覺元素“看起來”有多重。由大小、厚度、陰影等特徵決定。

設計中的作用：

• 營造真實感或層次感

• 賦予介面空間與體積感

實踐建議：利用不同的視覺重量分佈引導視覺動線。例如輕量化的圖示 vs 重量感十足的 CTA 區塊。